<template>
  <div id="pay-insurance-final">
    <div class="tips">完成支付后请点击下方 “支付完成” 按钮，更新保单状态。</div>

    <section>
      <h2>
        <span class="icon"></span>
        <span class="text">信息核对成功</span>
      </h2>
      <p>车牌号：{{ $route.query.num || '未上牌' }}</p>
      <p>有效期：{{ date }}</p>
    </section>

    <article>
      <div class="wrap">
        <h3>保费金额：<span>&yen;&nbsp;{{ $route.query.price }}</span></h3>

        <img :src="$route.query.code" alt="">
      </div>
    </article>

    <div class="public-btn-box">
      <router-link
        class="back"
        tag="button"
        to="/">支付完成</router-link>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: "pay-insurance-final",
    computed: {
      date() {
        let now = new Date();
        return this.$tool.formattedDate(now).year + 1 + '-' +
          this.$tool.formattedDate(now).month + '-' +
          this.$tool.formattedDate(now).day
      }
    },
    data() {
      return {
        params: {
          company_id: this.$route.params.company_id,
          order_id: this.$route.params.order_id,
          order_pay_id: this.$route.params.order_pay_id
        }
      }
    },
    beforeDestroy() {
      this.$http.post({
        api: this.$api.INSURANCE_PAY_CONFIRM,
        params: this.params,
        failure: () => {
          Toast('请确定已支付订单');
        }
      });
    }
  }
</script>

<style scoped lang="scss">

  #pay-insurance-final {
    >.tips {
      font-size: 1.2rem;
      color: $white;
      background: #0196ff;
      padding: .2rem .5rem;
    }

    >section {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      height: 10.8rem;
      padding: 1.8rem 0;
      margin-bottom: 1rem;
      background: $white;
      box-shadow: $public-box-shadow-bolder;

      >h2 {
        display: flex;
        align-items: center;
        font-size: 1.8rem;
        color: #0196ff;

        >.icon {
          width: 2.8rem;
          height: 2.8rem;
          margin-right: .8rem;
          background: url("../../assets/images/public/tick.png") no-repeat center / $size-as-parent $size-as-parent;
        }
      }

      >p {
        font-size: 1.5rem;
        color: #333;
      }
    }

    >article {
      padding: 0 1rem;
      margin-bottom: 1rem;

      >.wrap {
        width: $size-as-parent;
        padding: 2.8rem;
        background: $white;
        box-shadow: $public-box-shadow;

        >h3 {
          margin-bottom: 3.6rem;
          font-size: 2rem;
          color: #333;
          text-align: center;

          >span {
            color: #0196ff;
          }
        }

        >img {
          width: $size-as-parent;
          height: auto;
        }
      }
    }

    >.public-btn-box {
      >button {
        width: 100%;
        color: white;
        background: #0196ff;
      }
    }
  }
</style>
